<template>
  <el-cascader
    v-if="!useVirtual"
    class="ward-select"
    :model-value="modelValue"
    :options="wardTree"
    :props="props"
    @change="handleChange"
  />
  <VCascader
    v-else
    class="ward-select"
    :model-value="modelValue"
    :options="wardTree"
    :props="props"
    @change="handleChange"
  ></VCascader>
</template>

<script>
  import VCascader from '@/components/common/virtual/v-cascader/index.vue';
  /** 业务组件-病区下拉选择器 */
  export default {
    name: 'WardSelector',
    components: {
      VCascader,
    },
    props: {
      modelValue: {
        type: [String, Number, Array], // 如果绑定值为数组，则为多选,否则为单选
        default() {
          return '';
        },
      },
      opsData: {
        type: [Array, Boolean],
        default: false,
      },
      useVirtual: {
        // 是否使用单例组件
        type: Boolean,
        default: false,
      },
    },
    // inheritAttrs: false,
    emits: ['update:modelValue'],
    data() {
      return {
        wardTree: [],
        props: {
          multiple: true,
          value: 'code',
          label: 'name',
          children: 'children',
        },
      };
    },
    computed: {
      isMultiple() {
        return Array.isArray(this.modelValue);
      },
    },
    watch: {
      opsData(val) {
        this.wardTree = val;
      },
    },
    created() {
      this.getWardList();
    },
    methods: {
      getWardList() {
        if (this.opsData) {
          this.wardTree = this.opsData;
        }
      },
      handleChange(val) {
        // console.log('handleChange',val)
        this.$emit('update:modelValue', val);
      },
    },
  };
</script>

<style lang="scss">
  .ward-select.el-cascader {
    margin-bottom: 8px;
    height: 32px;
    .el-input {
      height: 32px;
    }
    .el-cascader__tags {
      height: 32px;
      display: flex;
      flex-direction: column;
      overflow: auto;
    }
  }
</style>
